<template>
  <div class="search_container searchArea">
    <el-form
      :inline="true"
      :model="search_data"
      :rules="rules"
      ref="search_data"
      class="demo-form-inline search-form"
    >
      <div>
        <!-- <el-form-item label="车名">
          <el-input
            v-model="search_data.nickName"
            placeholder="请输入"
            class="short-input"
          ></el-input>
        </el-form-item>

        <el-form-item label="车型">
          <el-input
            v-model="search_data.name"
            placeholder="请输入"
            class="short-input"
          ></el-input>
        </el-form-item>

        <el-form-item label="价格筛选" prop="list">
          <el-select
            multiple
            style="width: 100%"
            clearable
            v-model="search_data.list"
            placeholder="请选择"
            class="short-input"
            @change="changeValue"
          >
            <el-option
              v-for="item in roleType == '1,2'
                ? propertyList
                : roleType == '1'
                ? propertyList1
                : propertyList2"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="里程筛选">
          <el-select
            clearable
            v-model="search_data.certification"
            placeholder="请选择"
            class="short-input"
          >
            <el-option
              v-for="item in certificationList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="品牌筛选">
          <el-select
            clearable
            v-model="search_data.bid"
            placeholder="请选择"
            class="short-input"
          >
            <el-option
              v-for="item in subBusinessList"
              :key="item.id"
              :label="item.businessName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上牌时间筛选">
          <el-select
            clearable
            v-model="search_data.channel"
            placeholder="请选择"
            class="short-input"
          >
            <el-option
              v-for="item in sourceList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车龄筛选">
          <el-select
            clearable
            v-model="search_data.consumption"
            placeholder="请选择"
            class="short-input"
          >
            <el-option
              v-for="item in consumptionList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item> -->

        <!-- <el-form-item label="用户创建时间">
          <el-col :span="11">
            <el-form-item prop="startTime" class="short-input">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="开始时间"
                v-model="form.startTime"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="1">至</el-col>
          <el-col :span="11">
            <el-form-item prop="endTime" class="short-input">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="结束时间"
                v-model="form.endTime"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item> -->
        <!-- <el-form-item>
          <el-button
            type="primary"
            size="mini"
            icon="search"
            @click="onScreeoutMoney('search_data')"
            >筛选</el-button
          >
        </el-form-item> -->

        <el-form-item class="btnRight">
          <!-- <el-button type="primary" size ="mini" icon="view" @click='onBatchDelMoney()' :disabled="searchBtnDisabled">批量删除</el-button> -->
          <!-- <el-button type="success" size ="mini" icon="view">导出Elcel</el-button> -->
          <el-button
            type="primary"
            size="mini"
            icon="view"
            @click="onAddMoney()"
            >添加</el-button
          >
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
const sourceList = [
  { value: 1, name: "生活圈" },
  { value: 2, name: "微信关注" },
  { value: 3, name: "养老顾问" },
  { value: 4, name: "系统添加" },
];
const certificationList = [
  { value: 0, name: "未认证" },
  { value: 1, name: "认证" },
];
const propertyList = [
  { value: 0, name: "入住老人" },
  { value: 1, name: "报名学员" },
  { value: 2, name: "微信用户" },
  { value: 3, name: "养老顾问" },
];
const propertyList1 = [
  { value: 0, name: "入住老人" },

  { value: 2, name: "微信用户" },
  { value: 3, name: "养老顾问" },
];
const propertyList2 = [
  { value: 1, name: "报名学员" },
  { value: 2, name: "微信用户" },
  { value: 3, name: "养老顾问" },
];
const consumptionList = [
  { value: "", name: "请选择" },
  { value: 1, name: "是" },
  { value: null, name: "否" },
];

const userStatus = [
  { value: 1, name: "正常" },
  { value: 0, name: "已注销" },
];
export default {
  name: "searchItem",
  data() {
    this.sourceList = sourceList;
    this.certificationList = certificationList;
    this.propertyList = propertyList;
    this.propertyList1 = propertyList1;
    this.propertyList2 = propertyList2;
    this.consumptionList = consumptionList;
    this.userStatus = userStatus;
    return {
      subBusinessList: [],
      search_data: {
        startTime: "",
        endTime: "",
        name: "",
      },
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
      },
    };
  },
  computed: {
    ...mapGetters(["searchBtnDisabled"]),
  },
  created() {},
  methods: {
    onScreeoutMoney(searchForm) {
      this.$refs[searchForm].validate((valid) => {
        if (valid) {
          this.$store.commit("SET_SEARCH", this.search_data);
          this.$emit("searchList");
        }
      });
    },
    onAddMoney() {
      this.$emit("showDialog", "add");
    },
    onBatchDelMoney() {
      this.$emit("onBatchDelMoney");
    },
  },
};
</script>

<style lang="less" scoped>
.search_container {
  margin-bottom: 20px;
}
.btnRight {
  float: right;
  margin-right: 0px !important;
}
.searchArea {
  background: rgba(255, 255, 255, 1);
  border-radius: 2px;
  padding: 18px 18px 0;
}
</style>
